// vue-router使用步骤，版本：Vue3.x, vue-router4.x
// 1、vue-router安装，命令：npm install vue-router@4
// 2、src下创建router文件夹。新建要给index.js文件
// 3、index.js文件中导入VueRouter模块，import VueRouter from 'vue-router'
// 4、创建VueRouter实例,const router = VueRouter.createRouter({history:VueRouter.createWebHashHistory(),routes: [],})
// 5、router加载到应用中，main.js中app.use(router)
// 6、使用路由：通过<router-link>和<router-view>

// 1、导入VueRouter模块
// import VueRouter from "vue-router"
// 导入需要用到的组件，不需要用最好不要导入
import {
	createRouter,
	// createWebHashHistory,
	createWebHistory,
	useRoute,
} from "vue-router"

// 1、正常路由加载，一次性加载，会打包到同一个js文件中
// import Home from "../views/Home.vue"
// import About from "../views/About.vue"
// import User from "../views/User.vue"

// 2、路由懒加载
const Home = () => import("../views/Home.vue")
// 子路由组件
const HomeNews = () => import("../views/HomeNews.vue")
const HomeMessage = () => import("../views/HomeMessage.vue")
const About = () => import("../views/About.vue")
const User = () => import("../views/User.vue")
const Profile = () => import("../views/Profile.vue")

const routes = [
	// 这里存放路由和组件之间的映射
	// 重定向配置，这类特殊的配置最好放在上面，再次查找配置的时候容易找到，方便维护
	{
		path: "",
		// 访问 / 重定向到 /home
		redirect: "/home",
	},
	// 动态路由
	{
		path: "/user/:userId",
		component: User,
		// 添加元信息
		meta: {
			title: "用户",
		},
	},
	// 路由映射配置
	{
		path: "/home",
		component: Home,
		meta: {
			title: "首页",
		},
		// 配置子路由
		children: [
			// 添加一个默认设置，进入主页/home则主动跳转到/home/news
			// {
			// 	// path: "/home",
			// 	path: "",
			// 	redirect: "/home/news",
			// },
			// 这里重定向之后，无法实现/home/news页面缓存的效果，因为每次点击首页跳转之后才回到/home/news，而不是直接跳转到该路径，改用生命周期函数实现，在Hmoe组件中添加生命周期函数
			// 两个子路由对应的组件
			{
				path: "news",
				component: HomeNews,
				// 添加元信息，元数据通常指描述数据的数据
				meta: {
					title: "新闻",
				},
				// 定义路由独享守卫
				// beforeEnter: (to, from) => {
				// 	console.log("在新闻页定义路由独享守卫")
				// },
			},
			{
				path: "message",
				component: HomeMessage,
				meta: {
					title: "消息",
				},
			},
		],
	},
	{
		path: "/about",
		component: About,
		meta: {
			title: "关于",
		},
	},
	{
		path: "/profile",
		component: Profile,
		meta: {
			title: "档案",
		},
	},
]

// 2、创建VueRouter实例
const router = createRouter({
	// 定义history的哈希模式
	// history: createWebHashHistory(),
	// 定义history的HTML5模式
	history: createWebHistory(),
	routes, // short for `routes: routes`
	// 修改路由跳转时router-link标签的类名
	// linkActiveClass: "active",
})

// 添加导航守卫，参考文档：https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html

// 定义一个全局导航守卫，首尾每一个路由，并在路由跳转前执行这个函数，这个函数许哟啊传递一个函数作为参数，且被作为函数的参数需要传入三个参数，to、from、next，next是可选参数，to是要跳转的路由，from是要离开的路由，返回false则表示取消当前的导航，也可以返回一个路由地址，就像调用router.push()一样。
// 这个导航守卫是一个前置钩子，还有一个后置钩子：afterEach
// router.beforeEach((to, from, next) => {
// 	// to、from：从from跳转到to
// 	// console.log(to.matched[0].meta.title)
// 	// 这种方式和上面的方式均可
// 	console.log(to.meta.title)
// 	// 将页面的标题设置为跳转页面的标题，matched
// 	document.title = to.meta.title
// 	console.log("前置钩子调用")
// 	// 导航守卫内 next 函数必须执行且仅执行一次，否则导航守卫会一直守卫着路由，不进行跳转
// 	next()
// })

// 后置钩子，后置钩子中不需要调用next函数
// router.afterEach((to, from) => {
// 	console.log("调用后置钩子")
// })

// 导航守卫不仅仅有前面提到的全局导航守卫，还有路由独享守卫，在routes中每个路由内进行配置；还有组件独享守卫，在组件内进行配置。参考文档：https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E8%B7%AF%E7%94%B1%E7%8B%AC%E4%BA%AB%E7%9A%84%E5%AE%88%E5%8D%AB

// 3、导出组件
export default router

// vue-router结束
